<template>
    <view class="page-bg">
        <!-- 申请须知 -->
        <view class="card blue-card">
            <view class="card-title">
                <u-icon name="info-circle-fill" color="#3a7afe" size="26" style="margin-right:10rpx;" />
                申请须知
            </view>
            <view class="notice-list">
                <view>1. 请如实填写以下信息，虚假举报将承担相应法律责任</view>
                <view>2. 需上传有效证明材料（合同、凭证等），证据不足将不予受理</view>
                <view>3. 协会将在5个工作日内完成审核，结果将通过短信通知</view>
            </view>
        </view>
        <!-- 申请人信息 -->
        <view class="card">
            <view class="card-title">
                <u-icon name="account-fill" color="#3a7afe" size="26" style="margin-right:10rpx;" />
                申请人信息
            </view>
            <view class="form-label">申请人姓名</view>
            <input class="form-input" disabled v-model="applicant.empName" placeholder="请输入申请人姓名" />
            <view class="form-tip">已根据登录信息自动填充</view>
            <view class="form-label">所属单位</view>
            <input class="form-input" disabled v-model="applicant.enterpriseName" placeholder="请输入所属单位" />
            <view class="row">
                <view class="col">
                    <view class="form-label">联系电话</view>
                    <input class="form-input" disabled v-model="applicant.phonenumber" placeholder="请输入联系电话" />
                </view>
                <view class="col">
                    <view class="form-label">职位</view>
                    <input class="form-input" disabled v-model="applicant.position" placeholder="请输入职位" />
                </view>
            </view>
        </view>
        <!-- 被举报对象信息 -->
        <view class="card">
            <view class="card-title">
                <u-icon name="error-circle-fill" color="#fa5151" size="28" style="margin-right:10rpx;" />
                被举报对象信息
            </view>
            <view class="radio-row">
                <up-radio-group v-model="targetType" placement="row">
                    <up-radio name="company" label="企业" />
                    <up-radio name="person" label="个人" />
                </up-radio-group>
            </view>
            <!-- 企业表单 -->
            <view v-if="targetType === 'company'">
                <view class="form-label">企业名称 <text class="red">*</text></view>
                <input class="form-input" v-model="targetCompany.name" placeholder="请输入完整企业名称" />
                <view class="form-label">统一社会信用代码 <text class="red">*</text></view>
                <input class="form-input" v-model="targetCompany.code" placeholder="请输入18位统一社会信用代码" />
                <view class="form-tip">可通过国家企业信用信息公示系统查询</view>
                <view class="form-label">企业地址</view>
                <input class="form-input" v-model="targetCompany.address" placeholder="请输入企业注册地址或实际经营地址" />
                <view class="form-label">法定代表人</view>
                <input class="form-input" v-model="targetCompany.legal" placeholder="请输入法定代表人姓名" />
            </view>
            <!-- 个人表单 -->
            <view v-else>
                <view class="form-label">姓名 <text class="red">*</text></view>
                <input class="form-input" v-model="targetPerson.name" placeholder="请输入个人姓名" />
                <view class="form-label">身份证号 <text class="red">*</text></view>
                <input class="form-input" v-model="targetPerson.idcard" placeholder="请输入18位身份证号码" />
                <view class="form-tip">仅用于身份核实，协会将严格保密</view>
                <view class="form-label">工作单位</view>
                <input class="form-input" v-model="targetPerson.company" placeholder="请输入所在单位名称" />
                <view class="form-label">联系电话</view>
                <input class="form-input" v-model="targetPerson.phone" placeholder="请输入联系电话" />
            </view>
        </view>

        <!-- 失信行为描述 -->
        <view class="card">
            <view class="card-title">
                <u-icon name="file-text-fill" color="#3a7afe" size="26" style="margin-right:10rpx;" />
                失信行为描述
            </view>
            <view class="form-label">失信行为类型 <text class="red">*</text></view>
            <picker :range="actionTypes" range-key="dictLabel" @change="actionTypeChange">
                <view class="form-input picker-input">{{ actionTypeIdx ?  actionTypes[actionTypeIdx].dictLabel : '请选择失信行为类型' }}</view>
            </picker>
            <view class="form-label">行为发生时间 <text class="red">*</text></view>
            <picker mode="date" :value="actionDate" @change="actionDateChange">
                <view class="form-input picker-input">{{ actionDate || '年/月/日' }}</view>
            </picker>
            <view class="form-label">详细描述 <text class="red">*</text></view>
            <textarea class="form-textarea" v-model="actionDetail" :maxlength="500"
                placeholder="请详细描述失信行为的时间、地点、经过、涉及金额及造成的影响等（不少于200字）" @input="onDetailInput" />
            <view class="form-tip">{{ actionDetail.length }}/200字</view>
            <view class="form-label">涉及金额（元）</view>
            <input class="form-input" v-model="actionAmount" placeholder="请输入涉及金额，无则填0" />
        </view>

        <!-- 证据材料上传 -->
        <view class="card">
            <view class="card-title">
                <u-icon name="file-text-fill" color="#3a7afe" size="26" style="margin-right:10rpx;" />
                证据材料上传
            </view>
            <view class="form-tip">
                请上传与失信行为相关的证据材料（合同、转账记录、聊天记录、照片等）<br />
                支持格式：JPG、PNG、PDF，单个文件不超过10MB，最多上传5个文件
            </view>
            <view class="upload-box">
                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                    :maxCount="5"></up-upload>
            </view>
            <view class="form-label">证据说明</view>
            <textarea class="form-textarea" v-model="evidenceDesc" placeholder="请简要说明各证据材料的内容和用途（可选）" />
        </view>

        <!-- 申请人承诺 -->
        <view class="card">
            <view class="card-title">
                <u-icon name="edit-pen-fill" color="#3a7afe" size="26" style="margin-right:10rpx;" />
                申请人承诺
            </view>
            <view class="promise-box">
                <view>本人郑重承诺：</view>
                <view style="display: flex;align-items: center;gap: 10rpx;margin-top: 8rpx;"><view>• </view>所提供的信息和证据材料真实、合法、有效、无虚假内容</view>
                <view style="display: flex;align-items: center;gap: 10rpx;margin-top: 8rpx;"><view>• </view>知晓虚假举报需承担的法律责任和协会纪律处分</view>
                <view style="display: flex;align-items: center;gap: 10rpx;margin-top: 8rpx;"><view>• </view>同意协会按照相关规定对本申请进行审核和处理</view>
                <view style="display: flex;align-items: center;gap: 10rpx;margin-top: 8rpx;"><view>• </view>同意协会将审核结果在会员范围内进行公示</view>
            </view>
            <view class="checkbox-row">
                <!-- <checkbox v-model="promiseChecked" color="#3a7afe" /> -->
                <up-checkbox :customStyle="{marginBottom: '8rpx'}" label="" name="agree" usedAlone
                    v-model:checked="promiseChecked">
                </up-checkbox>
                <text>我已阅读并同意上述承诺内容 <text class="red">*</text></text>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-btn-wrap">
            <button class="submit-btn" @click="onSubmit">提交黑名单申请</button>
        </view>
    </view>
</template>

<script setup>
import { ref ,onMounted } from 'vue'
import {baseUrl,imgUrl} from '@/config/index.js'
import {addBlack,getDict,getEmployeeInfo} from '@/api/index'
const targetType = ref('company')
const targetCompany = ref({
  name: '',
  code: '',
  address: '',
  legal: ''
})
const targetPerson = ref({
  name: '',
  idcard: '',
  company: '',
  phone: ''
})

const applicant = ref({
  name: '张明',
  company: '恒信机械制造有限公司',
  phone: '13800138000',
  code: 'GY-2023-5678'
})

const actionTypes = ref([])
onMounted(()=>{
  getDict('bot_type').then(res=>{
    console.log(res);
    actionTypes.value = res.data
  })
  getEmployeeInfo().then(res=>{
    if(res.code==200){
      applicant.value=res.data
    }
  })
})
const actionTypeIdx = ref('')
const actionDate = ref('')
const actionDetail = ref('')
const actionAmount = ref('')

const actionTypeChange = (event) => { 
    actionTypeIdx.value = event.detail.value
}
const actionDateChange = (event) => { 
    actionDate.value = event.detail.value
}
const evidenceDesc = ref('')
const promiseChecked = ref(false)

const fileList1 = ref([])
const fileList2 = ref([])

// 删除图片
const deletePic = (event) => {
  fileList1.value.splice(event.index, 1);
  fileList2.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: imgUrl+result,
    });
    fileList2.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });

    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: baseUrl+'common/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: '',
      },
      success: (res) => {
        console.log(res);
        let url=JSON.parse(res.data).fileName
        resolve(url);
        // setTimeout(() => {
        // }, 1000);
      },
    });
  });
};

const onDetailInput = (e) => {
  if (actionDetail.value.length > 500) {
    actionDetail.value = actionDetail.value.slice(0, 500)
  }
}

const onSubmit = () => {
  if (!promiseChecked.value) {
    uni.showToast({ title: '请勾选承诺', icon: 'none' })
    return
  }
  let urls=fileList2.value.map(f => f.url)
  urls=urls.join(',')
  if(targetType.value === 'company'){
    if(!targetCompany.value.name){
      uni.showToast({ title: '请输入企业名称', icon: 'none' })
      return
    }
    if(!targetCompany.value.code||targetCompany.value.code.length!=18){
      uni.showToast({ title: '请输入18位统一社会信用代码', icon: 'none' })
      return
    }
    if(!targetCompany.value.address){
      uni.showToast({ title: '请输入企业地址', icon: 'none' })
      return
    }
    if(!targetCompany.value.legal){
      uni.showToast({ title: '请输入法定代表人', icon: 'none' })
      return
    }
  }else{
    if(!targetPerson.value.name){
      uni.showToast({ title: '请输入个人姓名', icon: 'none' })
      return
    }
    if(!targetPerson.value.idcard||targetPerson.value.idcard.length!=18){
      uni.showToast({ title: '请输入18位身份证号码', icon: 'none' })
      return
    }
    if(!targetPerson.value.company){
      uni.showToast({ title: '请输入工作单位', icon: 'none' })
      return
    }
    if(!targetPerson.value.phone){
      uni.showToast({ title: '请输入联系电话', icon: 'none' })
      return
    }
  }
  if(actionTypeIdx.value===''){
    uni.showToast({ title: '请选择失信行为类型', icon: 'none' })
    return
  }
  if(!actionDate.value){
    uni.showToast({ title: '请选择发生时间', icon: 'none' })
    return
  }
  if(!actionDetail.value){
    uni.showToast({ title: '请输入行为描述', icon: 'none' })
    return
  }
  if(!actionAmount.value){
    uni.showToast({ title: '请输入涉及金额', icon: 'none' })
    return
  }
 
  if(!evidenceDesc.value){
    uni.showToast({ title: '请输入证据描述', icon: 'none' })
    return
  }
  if(!fileList1.value.length){
    uni.showToast({ title: '请上传证据图片', icon: 'none' })
    return
  }
  let data = {
    type: targetType.value === 'company' ? 0 : 1 ,
    enterpriseName:targetCompany.value.name,
    unifiedSocialCreditCode:targetCompany.value.code,
    enterpriseAddress:targetCompany.value.address,
    legalRepresentative:targetCompany.value.legal,
    personalName:targetPerson.value.name,
    idCard:targetPerson.value.idcard,
    workUnit:targetPerson.value.company,
    contactPhone:targetPerson.value.phone,
    botType:Number(actionTypes.value[actionTypeIdx.value].dictValue),
    occurTime:actionDate.value,
    applyReason:actionDetail.value,
    involveAmount:actionAmount.value,
    evidenceUrls:urls,
    evidenceReason:evidenceDesc.value
  }
  addBlack(data).then(res=>{
    if(res.code==200){
      uni.showToast({ title: '提交成功', icon: 'success' })
      setTimeout(()=>{
        uni.navigateBack()
      },1500)
    }else{
      uni.showToast({ title: res.msg, icon: 'none' })

    }
  })
}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 150rpx;
}
.card {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 28rpx 24rpx 18rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  box-sizing: border-box;
}
.card-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  display: flex;
  align-items: center;
}
.blue-card {
  background: #f4f8ff;
}
.radio-row {
  display: flex;
  gap: 36rpx;
  margin-bottom: 18rpx;
  align-items: center;
}
.radio-label {
  font-size: 28rpx;
  color: #222;
  margin-right: 24rpx;
}
.form-label {
  font-size: 26rpx;
  color: #222;
  margin: 18rpx 0 8rpx 0;
  font-weight: 500;
}
.red {
  color: #fa5151;
}
.form-input {
  /* width: 100%; */
  background: #f7f8fa;
  border-radius: 12rpx;
  border: none;
  padding: 18rpx 20rpx;
  font-size: 28rpx;
  margin-bottom: 8rpx;
  color: #333;
}
.form-input:focus {
  outline: none;
  border: 1rpx solid #3a7afe;
}
.form-tip {
  color: #b0b3bb;
  font-size: 22rpx;
  margin-bottom: 8rpx;
}
.row {
  display: flex;
  gap: 18rpx;
}
.col {
  flex: 1;
}
.form-textarea {
  /* width: 100%; */
  min-height: 120rpx;
  background: #f7f8fa;
  border-radius: 12rpx;
  border: none;
  padding: 18rpx 20rpx;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  resize: none;
}
.picker-input {
  /* color: #888; */
}
.notice-list view {
  color: #4a4a4a;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}
.upload-box {
  margin: 18rpx 0 18rpx 0;
}
.promise-box {
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
  font-size: 26rpx;
  color: #444;
  margin-bottom: 18rpx;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 26rpx;
  margin-bottom: 8rpx;
}
.submit-btn-wrap {
  /* margin: 36rpx 24rpx 36rpx 24rpx; */
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 20rpx 24rpx 40rpx;
  box-sizing: border-box;
  z-index: 999;
}
.submit-btn {
  width: 100%;
  background: #2156f3;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  /* padding: 28rpx 0; */
  font-weight: bold;
  letter-spacing: 2rpx;
}
</style>